Dividir secciones en la plantilla

Hoy en día la cantidad de modelos de plantillas para Blogger es muy variada, se hace difícil a la hora de escoger la que más se adapta a nuestro gusto y necesidades.
Quizás por eso muchas veces decidimos personalizar nuestra propia plantilla.
La plantilla que más se presta a ser modificada y que menos problemas presenta a la hora de trabajar en ella es la Minima de Blogger.


Es simple y diáfana y casi todos la tuvimos alguna vez como blog para pruebas o "experimentos" con ella vamos a hacer unos cambios, separar secciones para darle una imagen diferente.
Esa imagen dependerá mucho de la imaginación de cada uno y el resultado es la satisfacción de tener una plantilla personalizada por nosotros.

Para empezar vamos a situarnos en Plantilla/Edicción de HTML no hará falta expandir la plantilla puesto que sólo trabajaremos en la CSS.

Ubicamos .post-body { y añadimos un borde con:
border: 1px solid #cc6666;

Comprobaremos en vista previa y veremos que no queda espacio entre el borde y el texto entonces añadiremos más espacio con:
padding: 5px 5px 5px 22px;

Para decorar un poco más ese espacio podemos añadirle también un color de fondo con
background:#ffffff;

O si preferimos una imagen con background:url('url-de-la-imagen');

Incluso redondear esas esquinas con:
-moz-border-radius: 15px;
-webkit-border-radius: 15px;

( visualizado con Explorer el efecto esquinas redondeadas se pierde y en su lugar quedan líneas rectas)

border: 1px solid #cc6666;
padding: 10px 5px 10px 22px;
background:#ffffff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px; }

El resultado sería el siguiente:


Si deseamos añadir el mismo efecto en el footer y que las etiquetas, autor, fecha y demás también tengan la misma imagen ubicaremos .post-footer { y añadimos las mismas líneas que en .post-body {

Para la sidebar nos encontraríamos con la necesidad de una pequeña modificación en:

.sidebar .widget, .main .widget {
border-bottom:1px dotted #cc6666;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Creamos dos secciones con ese código de forma que sean independientes y eliminamos el anterior.

.sidebar .widget {
border-bottom:1px dotted #cc6666;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

.main .widget {
border-bottom:1px dotted #cc6666;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Le añadimos las líneas de código igual que en .post-body {
pero solamente en .sidebar .widget {

.sidebar .widget {
border-bottom:1px dotted #cc6666;
margin:0 0 1.5em;
padding:0 0 1.5em;
border: 1px solid #cc6666;
padding: 10px 5px 10px 22px;
background:#ffffff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}


Mientras hacía esta entrada me entretuve añadiendo una imagen de fondo a la plantilla y unos iconos a los títulos de la sidebar, la diferencia es bien palpable.


Personalizar la plantilla no quiere decir que sigas estos pasos, únicamente se intenta orientar y sobre todo animar para que pierdas el miedo a manipular tu plantilla, seguramente tendrás mil ideas y puedo asegurar que cuando las lleves a la práctica quedarás asombrado de las posibilidades que tenemos a nuestro alcance.

Pueden empezar cuando gusten